import React from "react";
import { connect } from "dva";
import styles from "./IndexPage.css";
import PropTypes from "prop-types";
import { Button, Space, Spin } from "antd";

function IndexPage(props) {
  const {
    username,
    count,
    addCount,
    decCount,
    addCountAsync,
    minusCountAsync,
    history,
    loading,
  } = props;
  const handleProduct = () => {
    history.push("/product");
  };
  return (
    <div className={styles.normal}>
      <Spin spinning={!!loading} size="large" />
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <div>
        <button onClick={handleProduct}>进入商品页面</button>
      </div>
      <div className="demo-container">
        {username}
        <p>{count}</p>
        <Space>
          <Button onClick={addCount} type="primary">
            Add
          </Button>
          <Button type="primary" danger onClick={decCount}>
            Minus
          </Button>

          <Button onClick={addCountAsync}>Add async 2s</Button>
          <Button onClick={minusCountAsync} danger>
            Minus async 2s
          </Button>
        </Space>
      </div>
    </div>
  );
}

IndexPage.defaultProps = {
  username: "admin",
  count: 10,
};

IndexPage.propTypes = {
  username: PropTypes.string,
  count: PropTypes.number,
};

const matStateToProps = (state) => {
  console.log("🚀 ~ matStateToProps ~ state:", state);
  return {
    count: state.products.count,
    loading: state.loading.models.products,
  };
};

const mapDispatchToprops = (dispatch) => {
  return {
    addCount: () => dispatch({ type: "products/addCount" }),
    decCount: () => dispatch({ type: "products/minusCount" }),
    addCountAsync: () => dispatch({ type: "products/addCountAsync" }),
    minusCountAsync: () => dispatch({ type: "products/minusCountAsync" }),
  };
};

export default connect(matStateToProps, mapDispatchToprops)(IndexPage);
